<!--
 * @Author         : yanyongyu
 * @Date           : 2022-09-17 09:29:08
 * @LastEditors    : yanyongyu
 * @LastEditTime   : 2022-10-17 12:17:32
 * @Description    : None
 * @GitHub         : https://github.com/yanyongyu
-->

{% macro commented(event, ns, is_first=false, showavatar=true, created_at=false) %}
<div class="TimelineItem{% if is_first %} pt-0{% endif %}">
  {% if showavatar %}
  <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block">
    <a href="#" class="d-inline-block">
      <img class="avatar circle" src="{{ event.user.avatar_url }}" height="40" width="40" />
    </a>
  </div>
  {% endif %}
  <div class="TimelineItem-body my-0">
    <div class="
        timeline-comment  {# for css #}
        {% if not showavatar %}timeline-comment-nw{% endif %}  {# for review comment #}
        position-relative
        ml-n3
        color-fg-default color-bg-default
        border
        rounded-2
        color-border-default
      ">
      <div class="
          d-flex
          flex-row-reverse flex-items-center
          px-3 py-2
          color-fg-muted color-bg-subtle
          border-bottom
          color-border-default
          rounded-top-2
        ">
        <div class="d-none d-sm-flex">
          {% if event.author_association != "NONE" %}
          <span class="Label Label--primary ml-1">
            {{ event.author_association|title|escape }}
          </span>
          {% endif %}
          {% if event.user.login == ns.issue.user.login %}
          <span class="Label Label--primary ml-1">Author</span>
          {% endif %}
        </div>
        <h3 class="flex-auto text-normal f5">
          <strong class="css-truncate">
            <a class="Link--primary css-truncate-target text-bold">
              {{ event.user.login|escape }}
            </a>
          </strong>
          commented
          <a class="Link--secondary">
            {{ (created_at or event.created_at)|relative_time }}
          </a>
        </h3>
      </div>
      <div>
        <table class="d-block">
          <tbody class="d-block">
            <tr class="d-block">
              <td class="
                  d-block
                  p-3
                  width-full overflow-visible
                  f5 color-fg-default
                  markdown-body
                ">
                {% if event.body_html %}
                {{ event.body_html }}
                {% elif event.body %}
                {{ event.body|markdown_gfm }}
                {% else %}
                <p class="color-fg-muted">
                  <em>No description provided.</em>
                </p>
                {% endif %}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div>
        {% set _reactions = get_comment_reactions(event) %}
        {% if _reactions %}
        <div class="d-md-flex flex-row-reverse flex-justify-end ml-3 mb-3">
          <div class="d-flex flex-items-center flex-row flex-wrap">
            {% for reaction, count in _reactions.items() %}
            {% if count %}
            <button class="
                comment-reaction-button  {# for css #}
                d-flex flex-items-baseline
                no-underline mr-2 px-1 f6
                color-fg-muted color-bg-transparent
                border color-border-default
                btn-link
              ">
              {{ REACTION_EMOJIS[reaction] }}
              <span>{{ count }}</span>
            </button>
            {% endif %}
            {% endfor %}
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endmacro %}
